<template>
	<view class="rob-order">
		<view class="rob-conten">
			<view class="rob-image">
				<image src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/user_uniapp/static/sothebusorder.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="rob-prompt">
				抢单成功，请您尽快分配车辆和司机
			</view>
			<view class="rob-title thecountdown">
				请您在:<u-count-down style="margin-left: 4rpx;" @finish="timeFinish()" :time="timeOut"></u-count-down>分钟内为订单分配车辆和司机
			</view>
			<view class="rob-title">
				否则订单将重新分配
			</view>
			<view class="rob-change">
				<view class="change-list">
					<view class="change-list-header">
						<view style="margin-left: 30rpx;" class="change-list-title">
							<span style="display: inline-block;color: red;margin-right: 10rpx;">*</span>选择车辆
						</view>
					</view>
					<view class="change-info" @click="goChange(item)">
						<view class="change-info-drive">
							<text v-if="busVechile">
								{{busVechile}}
							</text>
							<text v-else>
								车辆信息
							</text>
						</view>
						<view class="rob-change-list"></view>
					</view>
					<view class="change-list-header" style="margin-top: 40rpx;">
						<view style="margin-left: 30rpx;" class="change-list-title">
							<span style="display: inline-block;color: red;margin-right: 10rpx;">*</span>选择司机
						</view>
					</view>
					<view class="change-info" @click="goChangeDrive(item)">
						<view class="change-info-drive">
							<text v-if="busDriver">
								{{busDriver}}
							</text>
							<text v-else>
								司机名称
							</text>
						</view>
						<view class="rob-change-list"></view>
					</view>

				</view>
				<u-picker :show="show" :columns="pickerCloumns" @cancel="closeChangeFn" @confirm="pickerConfirm" ></u-picker>
			</view>
		</view>
		<view class="sub-conten">
			<view class="sub-btn" @click="sucess">
				确认
			</view>
			<view class="clear-btn" @click="clearBtn">
				取消
			</view>
		</view>
	</view>
</template>

<script>
	import { publishVehicleList,assignOrderToVehicle } from '@/common/api/car.js'
	import { formatAutoClassLabel } from '@/vehicle/index.js'
 import { mapGetters, mapMutations } from 'vuex'
	export default{
		data(){
			return{
				show: false,
	            timeOut:600000,
				pickerCloumns:'',
				pickerCloumnsValue:'',
				columns: [
					['中国', '美国', '日本']
				],
				robPrompt:'您已抢单成功，等待用户付款，请您尽快分配车辆和司机',
				robTitle:'请您在01:00分钟内为订单分配车辆和司机，否则订单将重新分配',
				robList:[
					{title:'选择车辆',valueChange:[['中国', '美国', '1日本']],value:'',type:0},
					{title:'选择司机',valueChange:[['中国', '美国', '2日本']],value:'',type:1},
				],
				optionsObj:{ // 车辆选择列表所需数据
					startDate:'2023-07-11 06:00', //拿订单数据的starTime
					nextDate:'2023-07-21 17:00',//拿订单数据的endTime
					passengers:'100',//订单数据里的座位数
					companyId:'',//车企id
					brand:''
				},
				personList:[],
				sucessBtn:false,//true:列表数据已选择完成
			}
		},
		computed:{
			busVechile(){
				if(this.busChooseVehicleInfo){
					let brand = this.busChooseVehicleInfo.brand ? this.busChooseVehicleInfo.brand : ''
					let seatAmount = this.busChooseVehicleInfo.seatAmount ? this.busChooseVehicleInfo.seatAmount + '座' : ''
					let vehicleClass = this.busChooseVehicleInfo.vehicleClass ? this.types(this.busChooseVehicleInfo.vehicleClass) : ''
					return brand + seatAmount + vehicleClass
				}else{
					return ''
				}
			},
			busDriver(){
				if(this.distributionDrive){
					return this.distributionDrive.nickname ? this.distributionDrive.nickname : ''
				}else{
					return ''
				}
			},
			types() {
			  return (autoClass) => {
			    if (formatAutoClassLabel(autoClass)) {
			      return '(' + formatAutoClassLabel(autoClass) + ')'
			    } else {
			      return ''
			    }
			  }
			},
			...mapGetters({
			  userId: 'userId',
			  userInfo: 'userInfo',
			  busChooseVehicleInfo: 'busChooseVehicleInfo',
			  distributionDrive: 'distributionDrive'
			})
		},
		onShow() {
			console.log(this.busChooseVehicleInfo)
		},
		watch:{
			busVechile:{
				handler(newVal){
					let change = true
					if(!newVal || !this.busDriver){
						change = false
					}
					if(change){
						this.sucessBtn = true
						uni.disableAlertBeforeUnload({
							success() {
								console.log('数据监听关闭')
							}
						})
					}else{
						this.sucessBtn = false
						this.closePage()
					}
				},
				deep:true,
				immediate:true
			},
			busDriver:{
				handler(newVal){
					let change = true
					if(!newVal || !this.busVechile){
						change = false
					}
					if(change){
						this.sucessBtn = true
						uni.disableAlertBeforeUnload({
							success() {
								console.log('数据监听关闭')
							}
						})
					}else{
						this.sucessBtn = false
						this.closePage()
					}
				},
				deep:true,
				immediate:true
			},
		},
		created() {
			if(!this.sucessBtn){
				this.closePage()
			}
		},
		onLoad(options) {
			this.setBusChooseVehicleInfo({})
			if(options.person){
				let optionsCv = JSON.parse(options.person)
				if(!optionsCv.assignVehicleScountDown || optionsCv.assignVehicleScountDown <= 0 ){
					this.timeFinish()
					return
				}
				console.log(optionsCv)
				if(optionsCv){
					this.personList = optionsCv
					this.timeOut =optionsCv.assignVehicleScountDown*1000

					if(optionsCv.startTime) this.optionsObj.startDate = optionsCv.startTime;
					if(optionsCv.endTime) this.optionsObj.nextDate = optionsCv.endTime;
					if(optionsCv.seatNum) this.optionsObj.passengers = optionsCv.seatNum;
				}
			};
		},
		methods:{
			...mapMutations({
			  setBusChooseVehicleInfo: 'order/setBusChooseVehicleInfo',
			  setDistributionDrive: 'order/setDistributionDrive',
			}),
			publishVehicleListFn(){

			},
			closePage(){
				uni.enableAlertBeforeUnload({
					message:"您还未分配车辆和司机，请您尽快确认！",
					success(e) {
					},
				})
			},
			timeFinish(){
				setTimeout(()=>{
						uni.switchTab({
					        url:'/pages/order/order'
				            })
				},3000)
				uni.showToast({
				    title: '分配已超时，请重新操作！',
				    duration: 3000,
					icon:'none',
				})
			
			},
			goChange(item){
				this.optionsObj.openCarpool = 1
				// 跳转司机列表选着
				this.jump('/order/order-drive-list/order-drive-list?obj=' + JSON.stringify(this.optionsObj))
			},
			goChangeDrive(){
				this.optionsObj.openCarpool = 1
				console.log(this.optionsObj,'2222')
				this.jump('/order/drive-list/drive-list?personData=' + JSON.stringify(this.optionsObj))
			},
			closeChangeFn(){
				this.closeFn()
			},
			closeFn(){
				this.show = false
			},
			pickerConfirm(e){
				console.log(e)
				this.robList[this.pickerCloumnsValue.type].value = e.value[0]
				this.closeFn()
			},
			clearBtn(){
				uni.navigateBack({

				})
			},
			async sucess(){
				if(!this.sucessBtn){
					uni.showToast({
					    title: '请选择车辆和司机',
					    duration: 1000,
						icon:'none'
						})
					return false
				}
				console.log(this.distributionDrive)
				let send = {
					orderId : this.personList.orderId,
					vehicleId : this.busChooseVehicleInfo.vehicleId,
					driverId: this.distributionDrive.userId
				}
				 uni.showLoading({
					title: '加载中',
				  })
				let [err,res] = await assignOrderToVehicle(JSON.parse(JSON.stringify(send)))
				console.log(res.data)
				let _then = this
				if(res.data.data){
					uni.hideLoading();
					uni.showToast({
					    title: '分配成功',
					    duration: 1000
						})
						setTimeout(function(){
							uni.disableAlertBeforeUnload({})
							console.log('数据监听关闭,开始回退')
							_then.jump()
						},1001)
				}else{
					uni.hideLoading();
					uni.showToast({
					    title: res.data.msg ? res.data.msg : '分配失败',
						icon:'none',
					    duration: 1000
						})
						setTimeout(function(){
							_then.jump()
						},1001)
				}
			}
		},
		destroyed() {
			// 销毁选择的车辆信息缓存
			this.setBusChooseVehicleInfo(null)
			// 销毁选择的司机信息缓存
			this.setDistributionDrive(null)
		}
	}
</script>

<style lang="scss" scoped>
	.rob-order{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		box-sizing: border-box;
		.thecountdown {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 28rpx;
			font-weight: 600;
			color: #F3C243;
			/deep/ .u-count-down .u-count-down__text {
				font-size: 28rpx !important;
				font-weight: 600 !important;
				color: #F3C243 !important;
			}
		}
		.rob-conten{
			width: 100%;
			.rob-image{
				width: 160rpx;
				height: 160rpx;
				border-radius: 100%;
				border: 2rpx solid #fff;
				margin: 0 auto;
				margin-top: 60rpx;
			}
			.rob-prompt{
				width: fit-content;
				font-size: 40rpx;
				font-weight: 600;
				color: #865825FF;
				margin: 60rpx auto 0;
			}
			.rob-title{
				width: fit-content;
				font-size: 28rpx;
				font-weight: 400;
				color: #00000099;
				margin: 30rpx auto;
			}
			.rob-change{
				width: 100%;
				margin-top: 80rpx;
				box-sizing: border-box;
				padding: 0rpx 30rpx;
				text-align: center;
				.change-list{
					margin: 0  auto;
					width: 100%;
					font-size: 30rpx;
					font-weight: 400;
					color: #000000FF;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-direction: column;
					.change-list-header{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.change-list-title{
							font-size: 28rpx;
							font-weight: 400;
							color: #000000E6;
						}
						.change-list-title-change{
							font-size: 24rpx;
							font-weight: 400;
							color: #00000099;
							display: flex;
							align-items: center;
							justify-content: end;
							margin-right: 16rpx;
						}
					}
					.change-info{
						width: 100%;
						box-sizing: border-box;
						padding: 30rpx;
						border-radius: 12rpx;
						border: 2rpx solid #DDDDDDFF;
						margin-top: 26rpx;
						text-align: left;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.change-info-drive{
							color: #00000066;
							font-size: 28rpx;
							flex: 1;
						}
						.change-info-drive-name{
							color: #00000066;
							font-size: 28rpx;
							margin-top: 30rpx;
						}
					}
					.rob-list-name{
						font-size: 32rpx;
						font-weight: 400;
						color: #000000FF;
						margin-right: 56rpx;
					}
					.rob-list-change{
						font-size: 32rpx;
						font-weight: 400;
						color: #000000FF;
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex: 1;
						.list-info{
							width: 90%;
							text-align: left;
						}
					}
				}
			}
		}
		.rob-change-list{
			width: 12rpx;
			height: 12rpx;
			border-top: 2rpx solid #00000099;
			border-right: 2rpx solid #00000099;
			transform: rotateZ(45deg);
		}
		.sub-conten{
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.sub-btn{
				width: 100%;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 32rpx;
				color: #865825FF;
				padding: 32rpx 0rpx;
				text-align: center;
				border-radius: 12rpx;
				background: linear-gradient(90deg, #E8C9A2 0%, #D9A96A 100%);
			}
			.clear-btn{
				line-height: 32rpx;
				width: 100%;
				font-size: 32rpx;
				font-weight: 400;
				color: #865825FF;
				padding: 32rpx 0rpx;
				text-align: center;
				border-radius: 12rpx;
				background-color: #EEEEEEFF;
				margin-top: 30rpx;
			}
			.no-sub-btn{
				margin: 0 auto;
				width: 72%;
				font-size: 32rpx;
				font-weight: 400;
				color: #000;
				padding: 40rpx 0rpx;
				text-align: center;
				border-radius: 5rpx;
				background-color: #D9D9D9FF;
				opacity: .5;
			}
		}
	}
</style>
